<template>
	<view>
		<image :src="info.img" style="width: 100%;" mode="widthFix"></image>
		<view class=" f-42 f-bold t-c p-y-30">{{info.a_name}}</view>
		<view class="t-c">活动开始时间:{{info.start_time}}</view>
		<view class="t-c">活动结束时间:{{info.end_time}}</view>
		<view class="p-x-30 m-t-30">{{info.content}}</view>
		<view @click="goEnroll" class="bottom-button">{{info.status?'取消报名':'立即报名'}}</view>
	</view>
</template>

<script>
	import {
		getActivityInfoDetail
	} from '@/api/detail.js'
	import {
		getJoinDetail
	} from '@/api/index.js'
	export default {
		onLoad(option) {
			if (option.id) {
				this.getActivityInfo(option.id)
			} else {
				uni.navigateBack()
			}
		},
		onShow() {
			if (!this.$store.getters.userInfo.token) {
				return this.goLogin()
			}
		},
		data() {
			return {
				info: {}
			}
		},
		methods: {
			async getActivityInfo(id) {
				const res = await getActivityInfoDetail(id)
				if (res.code === 200) {
					this.info = res.data
				}
			},
			async goEnroll() {
				const res = await getJoinDetail(this.info.activity_id)
				if (res.code === 200) {
					this.info.status = !this.info.status
					uni.showToast({
						title: this.info.status ? '报名成功' : '取消成功'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/rank'
						})
					}, 1000)
				}
			}
		}
	}
</script>

<style>

</style>
